@extends ('layouts/app')

@section('content')
        @csrf
        <div class="welcome-content">
                <div class="swiper-container">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper">
                        <!-- Slides -->
                        <div class="swiper-slide">
                            <img src="/img/banner1.png" alt="" class="img-responsive">
                        </div>
                        <div class="swiper-slide">
                            <img src="/img/banner2.png" alt="" class="img-responsive">
                        </div>
                        <div class="swiper-slide">
                            <img src="/img/banner3.png" alt="" class="img-responsive">
                        </div>
                    </div>
                    <!-- If we need pagination  幻灯片源点-->
                    {{--<div class="swiper-pagination"></div>--}}
                </div>
                <div class="white-bg">
                    {{--搜索--}}
                    <div class="search row">
                        <div class="search-text">
                            <svg class="icon f48" aria-hidden="true">
                                <use xlink:href="#icon-tubiao-5"></use>
                            </svg>
                            <a href="/mobile/cities" class="gary6">
                                <span class="nowrap city f26"></span>
                            </a>
                        </div>
                        <div class="search-input">
                            <input type="text" id="search" name="search" class="weui-input f26" placeholder="搜索">
                            <svg class="icon f40" aria-hidden="true">
                                <use xlink:href="#icon-tubiao-7"></use>
                            </svg>
                        </div>
                    </div>

                    {{--功能--}}
                    <div class="serve-class weui-flex">
                        <div class="weui-flex__item text-center">
                            <a href="/mobile/reserve">
                                <div class="round light-green-bg">
                                    <svg class="icon f48 white" aria-hidden="true">
                                        <use xlink:href="#icon-tubiao-13"></use>
                                    </svg>
                                </div>
                                <p class="serve-title f28">预定</p>
                            </a>
                        </div>
                        <div class="weui-flex__item text-center">
                            <a href="/mobile/takeout">
                                <div class="round light-orange-bg">
                                    <svg class="icon f48 white" aria-hidden="true">
                                        <use xlink:href="#icon-tubiao-4"></use>
                                    </svg>
                                </div>
                                <p class="serve-title f28">外卖</p>
                            </a>
                        </div>
                        <div class="weui-flex__item text-center">
                            <a href="/mobile/lineup">
                                <div class="round light-blue-bg">
                                    <svg class="icon f48 white" aria-hidden="true">
                                        <use xlink:href="#icon-tubiao-8"></use>
                                    </svg>
                                </div>
                                <p class="serve-title f28">排队</p>
                            </a>
                        </div>
                        <div class="weui-flex__item text-center">
                            <a href="/mobile/activity">
                                <div class="round light-red-bg">
                                    <svg class="icon f48 white" aria-hidden="true">
                                        <use xlink:href="#icon-tubiao-2"></use>
                                    </svg>
                                </div>
                                <p class="serve-title f28">活动</p>
                            </a>
                        </div>
                    </div>
                </div>


                {{--专区--}}
                <div class="recommend">
                    <div class="weui-flex">
                        <a href='/mobile/preferential' class="weui-navbar__item">
                            <div class="text f26">
                                <svg class="icon f60" aria-hidden="true">
                                    <use xlink:href="#icon-weibiaoti--15"></use>
                                </svg>
                                特惠专区
                            </div>
                        </a>
                        <a href='/mobile/recommend' class="weui-navbar__item">
                            <div class="text f26">
                                <svg class="icon f60" aria-hidden="true">
                                    <use xlink:href="#icon-weibiaoti--13"></use>
                                </svg>
                                为你推荐
                            </div>
                        </a>
                    </div>

                    {{--<div class="slide-body" id="slide2">--}}
                        {{--<ul class="list-unstyled recommend-list row">--}}
                            {{--@foreach ($data as $vo)--}}
                                {{--<li>--}}
                                    {{--<a href="/mobile/shops/{{$vo->id}}}">--}}
                                        {{--<div class="img">--}}
                                            {{--<img src="{{$vo->shop_pic }}" alt="">--}}
                                        {{--</div>--}}
                                        {{--<div class="text">--}}
                                            {{--<div class="big-text nowrap f24">{{$vo->shop_name }}</div>--}}
                                            {{--<p class="small-text f18">陪我到可可西里看一次海，不要未来只陪到。。。</p>--}}
                                        {{--</div>--}}
                                    {{--</a>--}}
                                {{--</li>--}}
                            {{--@endforeach--}}
                        {{--</ul>--}}
                    {{--</div>--}}
                </div>

                {{--猜你想吃--}}
                <div class="eat row">
                    <div class="pull-left">
                        <div class="img">
                            <div class="img-title">猜你想吃</div>
                            <img src="/img/eat.png" alt="" class="img-responsive">
                        </div>
                    </div>
                    <div class="pull-left">
                        <div class="img">
                            <img src="/img/eat-1.png" alt="" class="img-responsive">
                            <img src="/img/eat-2.png" alt="" class="img-responsive">
                        </div>
                    </div>
                </div>

                {{--附近商家--}}
                <div class="near-shops select-navbar-content">
                    <ul class="select-navbar list-unstyled">
                        <li class="f30">
                            <input class="weui-input text-center" id="tab1" type="text" value="附近" readonly="">
                            <span class="arrow-down"></span>
                        </li>
                        <li class="f30" data-id="#tab2">
                            <input class="weui-input text-center" id="tab2" type="text" value="销量" readonly="">
                            <span class="arrow-down"></span>
                        </li>
                        <li class="f30" data-id="#tab3">
                            <input class="weui-input text-center" id="tab3" type="text" value="评分" readonly="">
                            <span class="arrow-down"></span>
                        </li>
                    </ul>

                    <ul class="shops-list">

                    </ul>

                        {{--// 加载--}}
                        <div style="padding-bottom: 10%;">
                            <div class="weui-infinite-scroll hasdata">
                                <div class="infinite-preloader"></div>
                                <div class="weui-loadmore">
                                    <i class="weui-loading"></i>
                                    <span class="weui-loadmore__tips">正在加载</span>
                                </div>
                            </div>
                            <div class="weui-infinite-scroll nodata">
                                <div class="weui-loadmore weui-loadmore_line">
                                    <span class="weui-loadmore__tips">没有更多了</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


    <script src="/jquery-weui/dist/js/swiper.js"></script>
    {{--滚动JS--}}
    <script src="/iscroll/build/iscroll-lite.js"></script>
    {{--腾讯地图SDK--}}
    <script charset="utf-8" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js "></script>


    <script>
        var lat = '', // 纬度
            lng = ''; // 经度

        var cityData = Storage.get("cityData");
        if (cityData.status) {
            cityData = JSON.parse(cityData.value);
            console.log("cityData", cityData);
            var len = cityData.length - 1;
            if (len > 0) {
                lat = cityData[len].detail.location.lat;
                lng = cityData[len].detail.location.lng;
                // 定位到城市
                $(".city").text(cityData[len].detail.addressComponents.city);
            } else {
                lat = cityData[len].lat;
                lng = cityData[len].lng;
                // 定位到城市
                $(".city").text(cityData[len].city);
            }

            // 默认获取附近列表
            getData('distance');

        } else {

            // 进来先获得地理位置
            getLocation(function (cityInfo) {
                console.log("city", cityInfo);

                lat = cityInfo.lat;
                lng = cityInfo.lng;

                // 默认获取附近列表
                getData('distance');

                // 获取商圈
                var code = cityInfo.adcode;
                getCityCode (code);
                Storage.set("cityData",[cityInfo]);
            });
        }


        // 获取商圈
        function getCityCode (code) {

            $.get("/api/city/get", {id: code}, function (res) {
                if (typeof res === 'string') {
                    res = JSON.parse(res);
                }
                // 格式化商圈数据
                var cData = getMyCityCodeData(res.data.city);
                console.log("cData", cData);
                cData.unshift({
                    checked: false,
                    title: "附近",
                    value: 'distance'});

                $("#tab1").select({
                    title: "选择商圈",
                    items: cData,
                    onClose: function (res) {
                        console.log("res", res);
                        // 获取数据前先把列表容器清空
                        $(".shops-list").html('');
                        getData(res.data.values);
                    }
                });
            });
        }

        // getMyCityCodeData 格式化商圈数据
        function getMyCityCodeData (obj) {
            var data = [];
            for (var i = 0, len = obj.length; i < len; i++) {
                data.push({value: obj[i].id, title: obj[i].zonename});
            }
            return data;
        }
        // 幻灯
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            autoplay : 6000,
            speed:500
        });




        // 初始化滑动组件
//        function myScroll(el) {
//            new IScroll(el, {
//                scrollbars: false,
//                scrollX: true,
//                scrollY: false
//            });
//        }

        // 默认初始化
//        myScroll(".slide-body");


        // 点击销量
        $("#tab2").click(function () {
            console.log("敢点我？");
            $(document.body).destroyInfinite();
            $(".shops-list").html('');
            getData('sales');
        });

        // 点击排序
        $("#tab3").click(function () {
            console.log("敢点我？");
            $(document.body).destroyInfinite();
            $(".shops-list").html('');
            getData('score');
        });

//        distance , sales, score
        // 获取销量商家数据
        function getData(type) {

            AjaxPage.init({
                url: '/api/index',    //路径
                cElement: document.body,    // 滚动容器
                element: '.shops-list',    // 列表容器
                type: 'listPart',      //渲染类型
                total: 0,   // 总记录条数
                loading: !1, // 加载状态
                ajaxType: 'GET',
                arg: {      // 请求参数
                    page: 1,
                    num: 8,
                    type: type,
                    lat: lat,
                    lng: lng
                }
            });
        }


        $("#search").on("click", function () {
            location.href = "/mobile/search"
        });

    </script>
@endsection


